<div class="container">    
    <div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">                    
        <div class="panel panel-info" >
            <div class="panel-heading">
                <div class="panel-title">Acesso ao sistema</div>
            </div>     

            <div style="padding-top:30px" class="panel-body" >

                <div style="display:none" id="erroLoginEmpty" class="alert alert-danger col-sm-12">Login/Senha requeridos</div>
                <div style="display:none" id="erroLoginServer" class="alert alert-danger col-sm-12"><!--mensagem do servidor--></div>

                <form id="loginform" class="form-horizontal">

                    <div style="margin-bottom: 25px" class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                        <input id="login-username" type="text" class="form-control" name="username" value="" placeholder="Nome de usuário">                                        
                    </div>

                    <div style="margin-bottom: 25px" class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                        <input id="login-password" type="password" class="form-control" name="password" placeholder="Senha">
                    </div>

                    <div style="margin-top:10px" class="form-group">
                        <!-- Button -->

                        <div class="col-sm-12 controls">
                            <a id="btn-login" href="#" class="btn btn-success">Login </a>
                        </div>
                    </div>
                </form>
                <div id="tryLogin" class="alert alert-info col-sm-12" style="display:none">
                    <img src="img/ajax-loader.gif"> Realizando login...
                </div>
            </div>                     
        </div>  
    </div>
</div>
